﻿<%@ Page Title="" Language="C#" MasterPageFile="~/1.Master" AutoEventWireup="true" CodeBehind="jqGrid.aspx.cs" Inherits="MyTemplate.jqGrid" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<table id="list2"></table>
<div id="pager2"></div>
<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        var grid = $("#list2");
        $("#list2").jqGrid({
            //url: "ArticleService.asmx/GetJSONData",
            //mtype: "POST",
            //ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
            //datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: "rows",
                page: "page",
                total: "totalpages",
                records: "totalrecords",
                cell: "cell",
                id: "ID",
                userdata: "userdata",
                repeatitems: false
            },
            datatype: function (postdata) {
               // $(".loading").show(); // make sure we can see loader text
                $.ajax({
                    url: 'ArticleService.asmx/GetJSONData',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(postdata),
                    dataType: "json",
                    success: function (data, st) {
                        if (st == "success") {
                            var grid = $("#list2")[0];
                            grid.addJSONData(JSON.parse(data.d));
                        }
                    },
                    error: function () {
                        alert("Error with AJAX callback");
                    }
                });
            },
            height: 250,
            colName: ['ID', 'Title', 'Link'],
            colModel: [
					{ name: 'ID' },
					{ name: 'Title' },
					{ name: 'Link' },
				],
            caption: "News"
        });
        $("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
    });
    function resajaxGetArticles() {
        if (req.readyState == 4) {
            var res = JSON.parse(req.responseText);
            var thegrid = $("#list2")[0];
            thegrid.addJSONData(JSON.parse(res.d));
        }
    }

    function ajaxGetArticles() {
        req.open("POST", "ArticleService.asmx/GetJSONData", true);
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.onreadystatechange = resajaxGetArticles;
        req.send(null);
    }
</script>
</asp:Content>
